<template>
  <div class="user-center">
    <h1>{{name}}</h1>
    <div class="container">
      <div class="head_img">
        <img src="../../common/image/xin.png" class="xin_img"/>
      </div>
      <div class="input">
        <div>
          <input type="text" class="input_a" id="input_a" placeholder="请输入账号" v-model="input_a">
        </div>
        <div>
          <input type="password" name="password" class="input_a" id="input_p" placeholder="请输入密码" v-model="input_p">
        </div>
      </div>
      <!--<router-link tag="div" class="mine" >-->
        <div class="btn" id="btn" v-on:click="login()">
          <button class="login_btn gray" id="login_btn" disabled="disabled" >
            <img src="../../common/image/login.png" class="login_img">
          </button>
        </div>
      <!--</router-link>-->
      <div class="go_register">
        <a v-on:click="go_register()">暂无帐号，先去注册</a>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        name: '音乐吧'
      }
    },
    methods: {
      login() {
        let account = this.input_a
        let password = this.input_p
        console.log(account)
        console.log(password)
        if (account === '888' && password === '888') {
          alert('登录成功')
          this.$router.push({path: '/recommend'})
        } else {
          alert('用户名或密码错误')
        }
      },
      go_register() {
        this.$router.push({path: '/register'})
      }

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .user-center
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 100;
    width: 100%;
    background: #222;
    text-align: center;
    h1
      width: 100%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 25px;
      font-family: STHupoi;
      color: #ffcd32;
      margin-bottom: 30px;
    .head_img
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: #f58220;
      border: solid 2px #ffcd32;
      margin-left: auto;
      margin-right: auto;
      line-height: 80px;
      color: #fffef9;
      .xin_img
        height: 80px;
        width: 80px;
        border-radius: 50%;
    .input
      width: 80%;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      margin-top: 30px;
      .input_a
        border-bottom: 1px solid #f58220;
        width: 100%;
        height: 40px;
        margin-top: 30px;
        padding-left: 10px;
        font-size: 15px;
        color: gray;
        float: left;
        position: relative;
        border-color: #ffcd32;
        border-radius: 10px;
        border-width: 10px;
    .btn
      width: 80%;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      .login_btn
        width: 100%;
        height: 50px;
        background-color: #f58220;
        border-radius: 50px;
        margin-top: 55px;
        border: solid #f58220 2px;
        .login_img
          height: 46px;
    .go_register a
      display: inline-block;
      color: #ffcd32;
      margin-top: 10px;
</style>
